@charset "UTF-8";
/*! normalize.css v3.0.0 | Base | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

/*! normalize.css v3.0.0 | Links | MIT License | git.io/normalize */
a {
  background: transparent;
}

a:active,
a:hover {
  outline: 0;
}

/*! normalize.css v3.0.0 | HTML5 Display Definitions | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

/*global*/
/*Alert*/
/*pop-stripe*/
/*Media query*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 100%;
  line-height: 1.5em;
  text-align: center;
}

.container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  *zoom: 1;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

h2 {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 300;
  font-size: 36px;
  line-height: 36px;
  color: #6b717f;
}

.highlight {
  background-color: #f8f8f8;
}

pre {
  font-size: 1rem;
  padding: .75rem 1rem;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid #ebebeb;
  background: rgba(0, 51, 102, 0.0625);
  border-radius: 0.125em;
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace, monospace;
  color: #31333a;
  text-align: left;
}
pre code {
  line-height: inherit;
  font-size: 1.2rem !important;
  font-weight: blod;
}

.alert {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  background: #C6538C;
  color: rgba(255, 255, 255, 0.75);
}
.alert p {
  margin: 0;
  padding-bottom: 0em;
}
.alert a {
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  color: #e6e6e6;
}
.alert a:hover, .alert a:focus {
  text-decoration: underline;
}
.alert ul {
  margin: 0;
}
.alert ul li {
  list-style: none;
  display: inline-block;
  margin-right: 32px;
}
.alert.stickers {
  background: #036;
}

.pop-stripe {
  height: 0.25em;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ff0000), color-stop(12.5%, #ff0000), color-stop(12.5%, #ffa500), color-stop(25%, #ffa500), color-stop(25%, #ffff00), color-stop(37.5%, #ffff00), color-stop(37.5%, #008000), color-stop(50%, #008000), color-stop(50%, #00ffff), color-stop(62.5%, #00ffff), color-stop(62.5%, #0000ff), color-stop(75%, #0000ff), color-stop(75%, #800080), color-stop(87.5%, #800080), color-stop(87.5%, #000000), color-stop(100%, #000000));
  background-image: -moz-linear-gradient(left, #ff0000 0%, #ff0000 12.5%, #ffa500 12.5%, #ffa500 25%, #ffff00 25%, #ffff00 37.5%, #008000 37.5%, #008000 50%, #00ffff 50%, #00ffff 62.5%, #0000ff 62.5%, #0000ff 75%, #800080 75%, #800080 87.5%, #000000 87.5%, #000000 100%);
  background-image: -webkit-linear-gradient(left, #ff0000 0%, #ff0000 12.5%, #ffa500 12.5%, #ffa500 25%, #ffff00 25%, #ffff00 37.5%, #008000 37.5%, #008000 50%, #00ffff 50%, #00ffff 62.5%, #0000ff 62.5%, #0000ff 75%, #800080 75%, #800080 87.5%, #000000 87.5%, #000000 100%);
  background-image: linear-gradient(to right, #ff0000 0%, #ff0000 12.5%, #ffa500 12.5%, #ffa500 25%, #ffff00 25%, #ffff00 37.5%, #008000 37.5%, #008000 50%, #00ffff 50%, #00ffff 62.5%, #0000ff 62.5%, #0000ff 75%, #800080 75%, #800080 87.5%, #000000 87.5%, #000000 100%);
}

.banner {
  margin: 0;
  padding-top: 0.75em;
}
.banner .site-brand {
  width: 25%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
  text-align: left;
  margin: 0;
}
.banner .site-brand img {
  height: 96px;
}
@media (max-width: 768px) {
  .banner .site-brand img {
    height: 48px;
  }
}
.banner .navigation {
  width: 75%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
  text-align: right;
}
.banner .navigation ul {
  margin: 0;
}
.banner .navigation ul li {
  list-style: none;
  display: inline-block;
  line-height: 96px;
}
.banner .navigation a {
  padding: 0.75em 1em;
  color: #c69;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
}
.banner .navigation a:visited {
  color: #b37399;
}
.banner .navigation a:hover, .banner .navigation a:focus {
  color: #036;
}
@media (max-width: 768px) {
  .banner .navigation {
    display: none;
  }
}
.banner .container {
  position: relative;
}
.banner .banner-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 16px;
}
.banner .banner-toggle button {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 48px;
  height: 48px;
}
.banner .banner-toggle .icon-bar {
  margin-top: 6px;
  margin-bottom: 6px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 32px;
  height: 2px;
  background-color: #c69;
}
@media (max-width: 768px) {
  .banner .banner-toggle {
    display: block;
  }
}

.page-header h1 {
  color: #808c99;
  font-weight: 300;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -2px;
  margin: 0;
}
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 32px;
  }
}

.section-bottom .list-tiled {
  padding-left: 0;
  text-align: left;
}
.section-bottom .list-tiled li {
  width: 33.33333%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
  list-style: none;
  text-align: left;
  padding-left: 0;
}
@media (max-width: 768px) {
  .section-bottom .list-tiled li {
    width: 100%;
    float: left;
    padding-left: 0.83333%;
    padding-right: 0.83333%;
  }
}
.section-bottom .list-tiled > li:nth-child(3n+4) {
  clear: both;
}
.section-bottom .list-tiled h3 {
  color: #808c99;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.section-bottom .list-tiled p {
  color: #6B717F;
}

.contentinfo {
  font-size: 12px;
  color: #808c99;
}
.contentinfo ul {
  display: table;
  padding: 0;
}
.contentinfo ul li {
  list-style: none;
  display: table-cell;
  vertical-align: middle;
}
.contentinfo p {
  padding-bottom: 4.5px;
  margin: 0;
}
.contentinfo a {
  color: #484c55;
  text-decoration: none;
}
.contentinfo a:visited {
  color: #b37399;
}
.contentinfo .contentinfo-legal {
  text-align: left;
  width: 41.66667%;
}
.contentinfo .contentinfo-tools {
  width: 41.66667%;
}
.contentinfo .contentinfo-tools li {
  padding-right: 24px;
}
.contentinfo .contentinfo-social {
  width: 16.66667%;
  text-align: right;
}
@media (max-width: 768px) {
  .contentinfo .contentinfo-legal, .contentinfo .contentinfo-tools, .contentinfo .contentinfo-social {
    display: list-item;
    width: 100%;
  }
}

.index .hero-image img {
  max-width: 100%;
  height: auto;
}

.body a, .install .index .introduction a, .index .install .introduction a, .install .index .hero-image a, .index .install .hero-image a, .install .left-grid_column a, .install .right-grid_column a, .documentation a, .community a, .libsass a {
  color: #036;
  text-decoration: none;
}
.body a:hover, .install .index .introduction a:hover, .index .install .introduction a:hover, .install .index .hero-image a:hover, .index .install .hero-image a:hover, .install .left-grid_column a:hover, .install .right-grid_column a:hover, .documentation a:hover, .community a:hover, .libsass a:hover, .body a:focus, .install .index .introduction a:focus, .index .install .introduction a:focus, .install .index .hero-image a:focus, .index .install .hero-image a:focus, .install .left-grid_column a:focus, .install .right-grid_column a:focus, .documentation a:focus, .community a:focus, .libsass a:focus {
  color: #c69;
}
.body a:visited, .install .index .introduction a:visited, .index .install .introduction a:visited, .install .index .hero-image a:visited, .index .install .hero-image a:visited, .install .left-grid_column a:visited, .install .right-grid_column a:visited, .documentation a:visited, .community a:visited, .libsass a:visited {
  color: #b37399;
}

.sl-c-introduction {
  color: #699 !important;
  font-size: 24px !important;
  line-height: 42px !important;
  font-weight: 300 !important;
}

.body {
  margin: 48px auto;
  max-width: 1040px;
  text-align: left;
}

.index .introduction, .index .hero-image, .index .install .left-grid_column, .install .index .left-grid_column, .index .install .right-grid_column, .install .index .right-grid_column {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
@media (max-width: 768px) {
  .index .introduction, .index .hero-image, .index .install .left-grid_column, .install .index .left-grid_column, .index .install .right-grid_column, .install .index .right-grid_column {
    width: 100%;
    display: block;
  }
}
.index .introduction {
  padding-left: 20px;
  font-size: 24px;
  line-height: 36px;
  color: #699;
}

.install {
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding: 0;
}
.install .index .introduction, .index .install .introduction, .install .index .hero-image, .index .install .hero-image, .install .left-grid_column, .install .right-grid_column {
  width: 50%;
  display: table-cell;
  text-align: center;
  color: #6b717f;
  padding-left: 0;
}
.install .index .introduction img, .index .install .introduction img, .install .index .hero-image img, .index .install .hero-image img, .install .left-grid_column img, .install .right-grid_column img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.install .index .introduction p, .index .install .introduction p, .install .index .hero-image p, .index .install .hero-image p, .install .left-grid_column p, .install .right-grid_column p {
  text-align: left;
  padding-bottom: 4.5px;
  margin: 16px 0;
}
.install .left-grid_column ul {
  padding: 0;
}
.install .left-grid_column ul li {
  text-align: left;
}
.install .right-grid_column .sl-c-button--primary {
  background-color: #bf4080;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 1px rgba(0, 51, 102, 0.125);
  color: #fff;
}
.install .right-grid_column dl {
  text-align: left;
}
.install .right-grid_column dl dd {
  margin: 0;
}

.guide section p {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6b717f;
  font-size: 18px;
  line-height: 27px;
}
.guide section hr {
  margin: 4em 0;
  color: #6B717f;
}
.guide section .nl {
  color: #990000;
  font-weight: bold;
}
.guide section .m, .guide section .nv, .guide section .mh {
  color: #006666;
  font-weight: 400;
}
.guide section .nb {
  color: #006080;
  font-weight: 400;
}
.guide section .n, .guide section .p {
  color: #31333a;
  font-weight: 400;
}
.guide section .o {
  color: #000000;
  font-weight: bold;
}
.guide section .nt {
  color: #000080;
  font-weight: 400;
}
.guide section dl > div {
  display: inline-block;
}
.guide section dl .compatibility {
  color: #036;
  font-weight: 600;
  font-size: 14px;
  padding-right: 16px;
}
.guide section dl dt {
  color: #6b717f;
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
}
.guide section dl dd {
  color: #6b717f;
  font-weight: 300;
  font-size: 14px;
  display: inline-block;
  margin-left: 0;
  padding-left: 10px;
}
.guide section .ui-tabs .ui-tabs-nav {
  margin: 0;
  padding-left: 0;
}
.guide section .ui-tabs .ui-tabs-nav li {
  list-style: none;
  display: inline-block;
}
.guide section .ui-tabs .ui-tabs-nav li:nth-child(1) {
  width: 8.33333%;
}
.guide section .ui-tabs .ui-tabs-nav li:nth-child(2) {
  width: 41.66667%;
}
.guide section .ui-tabs > div {
  display: inline-block;
  width: 49%;
  margin-right: 7px;
}

.blog p {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6b717f;
  font-size: 18px;
  line-height: 27px;
}

.documentation {
  margin: 40px 0;
  text-align: left;
}
.documentation nav {
  width: 12.5%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}
.documentation nav ul {
  padding-left: 0;
  margin: 0;
}
.documentation nav ul li {
  list-style: none;
  color: #6b717f;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
  margin: 8px 0;
}
.documentation nav ul a::after {
  content: "▶";
  float: right;
  font-size: 0.5em;
  text-align: center;
  margin-top: 5px;
  width: 19px;
  transition: transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s;
}
.documentation .sl-l-medium-holy-grail__main {
  width: 75%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 100px;
}
.documentation .sl-l-container ul p {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6b717f;
  font-size: 18px;
  line-height: 27px;
}

.community {
  margin: 40px 0;
  text-align: left;
  margin: 48px auto;
}
.community .sl-l-large-holy-grail__main {
  width: 66.66667%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}
.community .sl-l-large-holy-grail__main .sl-l-container > p {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6b717f;
  font-size: 18px;
  line-height: 27px;
}
.community .sl-l-large-holy-grail__complementary {
  width: 33.33333%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}
.community .sl-l-large-holy-grail__complementary p {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6b717f;
  font-size: 18px;
  line-height: 27px;
}

.libsass {
  margin: 40px 0;
  text-align: left;
}
.libsass nav {
  width: 16.66667%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}
.libsass nav ul {
  list-style: none;
  padding-left: 0;
}
.libsass nav ul li {
  line-height: 20px;
  margin: 8px 0;
  font-size: 16px;
}
.libsass .sl-l-medium-holy-grail__main {
  width: 83.33333%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__complementary {
  width: 33.33333%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
  float: right;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__complementary::after {
  clear: both;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__complementary ul {
  padding-left: 0;
  margin-left: 26px;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__complementary ul li {
  line-height: 27px;
  color: #6b717b;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__main {
  width: 66.66667%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__main ul {
  padding-left: 0;
  margin-left: 26px;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__main ul li {
  line-height: 27px;
  color: #6b717b;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__main ul p {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6b717f;
  font-size: 18px;
  line-height: 27px;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__main .sl-l-container > p {
  font-family: "Source Serif Pro", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6b717f;
  font-size: 18px;
  line-height: 27px;
}
.libsass .sl-l-medium-holy-grail__main .sl-l-large-holy-grail__main .sl-l-container h3 {
  line-height: 25px;
  font-size: 20px;
  color: #6b717f;
}
